<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>穿梭框组件</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/layui/axios.min.js"></script>
    <script src="${pageContext.request.contextPath}/layui/common.js"></script>
    <style>
        #test1 {
            margin: 10px 35px;
        }
    </style>
</head>
<body>
<div id="test1"></div>
<script>
    let transfer = false
    layui.use('transfer', function () {
        transfer = layui.transfer;

        let options = {
            elem: '#test1'  //绑定元素
            , height: 580
            , title: ["未选课程", "已选课程"]
            , data: []
            , value: []
            , id: 'course' //定义索引
            , parseData: function (res) {
                return {
                    "value": res.id //数据值
                    , "title": res.name //数据标题
                    , "checked": res.checked //是否选中
                }
            }
        }
        //渲染
        axios.get("/student/course/list?sno=${param.id}").then(ret => {
            if (ret.data.status) {
                options.data = ret.data.list
                options.value = ret.data.list.filter(d => d.checked).map(d => d.id)
                transfer.render(options);
            }
        })
    });

    // 绑定穿梭框数据
    function bindTransferData(index) {
        let data = transfer.getData('course');
        let ids = data.map(d => d.value)

        axios.put("/student/course/bind${param.id}", ids).then(ret => {
            if (ret.data.status) {
                parent.layui.table.reload("job")
                parent.layer.msg("选课成功")
                parent.layer.close(index);
            }
        })
    }

</script>
</body>
</html>